import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image} from '@tarojs/components'
import { AtActionSheet, AtIcon, AtInput } from 'taro-ui'
import './dLinearLayout.scss'
import '../../../icon.scss';

export class Sku extends Component {
  state = {
    openAtAction: false,
  }
  componentDidMount () { 
  }

  handleShowAtAction(){
    this.setState({
      openAtAction:true
    });
  }

  handleCloseAtAction(){
    this.setState({
      openAtAction:false
    });
  }

  handleChange(){

  }

  render () {
    const { openAtAction } = this.state;
    return (
      <View className='atAction-content'>
          <View className='dLinearLayout' onClick={() => this.handleShowAtAction()}>
            <View className='dLinearLayout-left'>选择</View>
            <View  className='dLinearLayout-center'>
              <View className='dLinearLayout-content'>
                <View className='black'>选择 颜色 尺码</View>
              </View>
              <View className='dLinearLayout-content mt20'>
                <View className='dLinearLayout-sku mr8'>
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                  <Text className="sku-more">共18种颜色可选</Text>
                </View>
              </View>
            </View>
            <View className='dLinearLayout-right'>
              <AtIcon value='chevron-right' size='16' color='#8d8d8d'></AtIcon>
            </View>
          </View>

          <AtActionSheet isOpened={openAtAction}>
            <View className='at-content'>
              <View className='sku-goods-info'>
                <View className='sku-goods-image'>
                  <Image className="sku-thumbnail" src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                </View>
                <View className='sku-goods-price'>
                  <View className='sku-goods-price-value'>￥318</View>
                  <View className='sku-goods-stock'>库存2222件</View>
                  <View className='sku-goods-selected'>请选择 尺码 颜色分类</View>
                </View>
                <View className='sku-close-icon' onClick={() => this.handleCloseAtAction()}>
                  <AtIcon value='close-circle' size='20' color='#717171'></AtIcon>
                </View>
              </View>

              <View className='sku-content'>
                <View className='sku-name'>尺码</View>
                <View className='sku-value'>
                  <View className='sku-value-item sku-value-item-active'>37</View>
                  <View className='sku-value-item'>38</View>
                  <View className='sku-value-item'>39</View>
                  <View className='sku-value-item'>40</View>
                  <View className='sku-value-item'>41</View>
                  <View className='sku-value-item'>42</View>
                  <View className='sku-value-item'>43</View>
                  <View className='sku-value-item'>44</View>
                  <View className='sku-value-item'>45</View>
                  <View className='sku-value-item'>注意，此款偏大一码</View>
                </View>
              </View>
              <View className='sku-content'>
                <View className='sku-name'>颜色分类</View>
                <View className='sku-value'>
                  <View className='sku-value-item'>
                    <View className="sku-value-item-image" >
                      <Image src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                    </View>
                    TT03-62款:黑色
                  </View>
                  <View className='sku-value-item'>
                    <View className="sku-value-item-image" >
                      <Image src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                    </View>
                    TT03-62款:酒红色
                  </View>
                  <View className='sku-value-item'>
                    <View className="sku-value-item-image" >
                      <Image src='https://img.alicdn.com/imgextra/i2/2454743060/O1CN01TIGYZj1YTWQyrYdbA_!!2454743060.jpg_1152x1920Q50s50.jpg' mode='widthFix' />
                    </View>
                    TT03-62款:酒红色
                  </View>
                </View>
              </View>

              <View className='sku-buy-num'>
                <View className='sku-buy-title'>购买数量</View>
                <View className='sku-buy-do'>
                  <View className='subtract'><AtIcon value='subtract' size='18' color='#717171'></AtIcon></View>
                  <View className="sku-buy-input">
                    <AtInput name='value' border={false} type='number' value={1} onChange={this.handleChange.bind(this)} />
                  </View>
                  <View className='add'><AtIcon value='add' size='18' color='#717171'></AtIcon></View>
                </View>
              </View>
            </View>
            <View className='at-button'>
              <View className='buy-button'>
                <View className='add-cart'>加入购物车</View>
                <View className='buy-now'>立即购买</View>
              </View>
            </View>
          </AtActionSheet>
        </View>
    )
  }
}